<template>
	<div class="creatNewAgent">
		<HeaderTop :title="`新增代理`"></HeaderTop>
		<div class="input-area">
			<div class="user-name">
				<img src="../../../static/images/agent-login-account.png" alt="" class="user-name-icon">
				<div class="middle-gray-line"></div>
				<input id="userName" type="text" placeholder="请输入登录帐户,5到12位字母或数字" ref="accountInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
				<div class="middle-gray-line"></div>
				<input id="userPwd" type="password" placeholder="请输入密码,6位或以上数字/字母/字符" ref="pwdInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-realName.png" alt="" class="user-name-icon real-name-icon">
				<div class="middle-gray-line"></div>
				<input type="text" placeholder="请输入姓名" ref="realName">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-phone.png" alt="" class="user-name-icon phone-icon">
				<div class="middle-gray-line"></div>
				<input type="number" placeholder="请输入手机号码" ref="phone">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-reg-qq.png" alt="" class="user-name-icon qq-icon">
				<div class="middle-gray-line"></div>
				<input type="text" placeholder="请输入QQ/Skype" ref="qq_skype">
			</div>
		</div>
		<div class="sub-area">
			<van-button class="sub-btn" round type="info" color="#00459E" @click="subToAdd">保存</van-button>
			<van-button class="clear-btn" round type="info" color="#969696" @click="clearInput">重置</van-button>
		</div>
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top';
import {Dialog,Toast} from 'vant'
export default {
	name: 'creatNewAgent',
	components: {
		HeaderTop,
	},
	data() {
		return {
		
		}
	},
	mounted() {
	
	},
	methods: {
		subToAdd(){
			let params = {
				loginName:this.$refs.accountInput.value,
				password:this.$refs.pwdInput.value,
				realName: this.$refs.realName.value,
				phone:this.$refs.phone.value,
				qq:this.$refs.qq_skype.value,
			}
			this.ServerAPI.postAPI(this.API.addAgent,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						Dialog.alert({
							message: data.info,
							confirmButtonColor:'#00459E'
						}).then(() => {
							// on close
							this.clearInput()
						});
					}else{
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		},
		clearInput(){
			this.$refs.accountInput.value = this.$refs.pwdInput.value = this.$refs.realName.value = this.$refs.phone.value = this.$refs.qq_skype.value = '';
		}
	}
}
</script>

<style lang="scss" scoped>
.input-area {
	width: 90%;
	margin: .6rem auto 0;
	position: relative;
	
	.name-remind {
		position: absolute;
		top: -.4rem;
		font-size: .24rem;
		color: #AAAAAA;
	}
	
	.user-name {
		display: flex;
		align-items: center;
		padding: .2rem .3rem;
		border-radius: .6rem;
		background: rgb(238,238,238);
		
		.user-name-icon {
			width: .4rem;
			margin-left: .2rem;
		}
		.real-name-icon {
			width: .5rem;
			height: .5rem;
			margin-left: .1rem;
		}
		.phone-icon {
			width: .35rem;
			height: .5rem;
		}
		.qq-icon {
			width: .35rem;
		}
		.middle-gray-line {
			height: .6rem;
			width: 1px;
			background: rgba(142,142,141,.5);
			margin: 0 .2rem;
		}
		
		input {
			width: 100%;
			border: none;
			font-size: .26rem;
			background: rgb(238,238,238);
		}
		.vc-button {
			position: absolute;
			right: .15rem;
			width: 2rem;
			height: .8rem;
			line-height: .8rem;
			font-size: .26rem;
		}
	}
	
	
	.user-pwd {
		margin-top: .4rem;
		display: flex;
		align-items: center;
		padding: .2rem .35rem;
		border-radius: .6rem;
		
		.user-pwd-icon {
			width: .4rem;
			margin-right: .1rem;
		}
		
		input {
			width: 100%;
			border: none;
			font-size: .26rem;
		}
	}
}
.sub-area {
	width: 60%;
	margin: .8rem auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.sub-btn{
		width: 2rem;
		background-color: #00459E;
		border-color: #00459E;
	}
	.clear-btn {
		width: 2rem;
	}
}

</style>
